<template>
  <div class="ol-popup">
    <a
      href="#"
      id="popup-closer"
      class="ol-popup-closer"
    />
    <div>
      <el-row>
        <el-col
          class="popup-col"
          :key="item.id"
          v-for="(item, index ) in stationList"
        >
          <div style="font-size: 1.2em;font-weight: bold;">
            <!-- 地球站 -->
            {{ $t('message.popup.station') }} {{ index + 1 }} : {{ item.name }}
          </div>
          <div>
            <!-- 状态 -->
            {{ $t('message.popup.state') }}: <font-awesome-icon
              :style="{color: item.stateColor}"
              icon="circle"
            /> {{ item.stateName }},
            <!-- 坐标 -->
            {{ $t('message.popup.coords') }}: {{ item.longitude }},{{ item.latitude }}
          </div>
          <el-divider />
        </el-col>
        <el-col
          v-if="featureCount > showDataNumber"
          class="popup-col"
          style="font-size: 0.8em"
        >
          <!-- ...等共{{ featureCount }}个地球站 -->
          {{ $t('message.popup.moreInfo', {featureCount}) }}
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PopUp',
  props: {
    featureData: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data () {
    return {
      showDataNumber: 3 // 展示的地球站数量
    }
  },
  computed: {
    stationList () {
      let stations = []
      if (!this.featureData.length) return stations
      for (let i = 0; i < this.featureData.length; i++) {
        stations.push(this.featureData[i])
        if (stations.length >= this.showDataNumber) break
      }
      return stations.map(stationItem => {
        let stateColor = ''
        switch (stationItem.state) {
          case 0:
            stateColor = '#284805'
            break
          case 1:
            stateColor = '#57a600'
            break
          case 2:
            stateColor = '#8eff12'
            break
          default:
            stateColor = '#ae0004'
        }
        return {
          ...stationItem,
          stateColor,
          stateName: this.$t(`message.define.cu.state[${stationItem.state}]`)
        }
      })
    },
    featureCount () {
      return this.featureData ? this.featureData.length : 0
    }
  }
}
</script>

<style scoped>
  .ol-popup {
    position: absolute;
    background-color: white;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    min-width: 240px;
  }
  .ol-popup:after, .ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  .ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
  }
  .ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
  }
  .ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
  }
  .ol-popup-closer:after {
    color: #c0c4cc;
    content: "✖";
  }

  .popup-col{
    text-align: left;
  }
</style>
